<!--<template>-->
<!--    <div class="infinite-list" v-infinite-scroll="load" style="overflow:auto; height: 1200px;" infinite-scroll-distance="10" >-->
<!--        <div style="background-color: #8cc5ff; height: 1000px;">1</div>-->
<!--        <ul >-->
<!--            <li :key="i" v-for="i in count" class="infinite-list-item">{{ i }}</li>-->
<!--        </ul>-->
<!--    </div>-->

<!--</template>-->

<!--<script>-->
<!--    export default {-->
<!--        data () {-->
<!--            return {-->
<!--                count: 0-->
<!--            }-->
<!--        },-->
<!--        methods: {-->
<!--            load () {-->
<!--                this.count += 2-->
<!--            }-->
<!--        }-->
<!--    }-->
<!--</script>-->

<!-- 测试无限滚动-->
<!--注意：要正常生效的话，要制定 父div的 height属性，同时指定一下infinite-scroll-distance，它默认为0（有时候不生效）-->
<template>
    <div >

        <el-row type="flex" justify="center">
            <el-col :span="18">
                <div style="background-color: #8cc5ff; height: 1000px">1</div>

                <el-row>
                    <el-col :span="6" style="background-color: #f17008">
                        123
                    </el-col>
                    <el-col :span="18">
                        <div    v-if="doInfinite"
                                class="infinite-list-wrapper" style="overflow:auto; height: 2000px"
                                v-infinite-scroll="load"
                                infinite-scroll-distance="0"

                                infinite-scroll-immediate="false">
                            <div style="height: 250px" :key="i" v-for="i in count" class="list-item">{{ i }}</div>
<!--                            <p v-if="loading">加载中...</p>-->
                        </div>
                        <!--        <p v-loading="loading">加载中...</p>-->
<!--                        <p v-if="noMore">没有更多了</p>-->
                    </el-col>
                </el-row>

                <div style="background-color: #8cc5ff; height: 200px">1</div>
            </el-col>
        </el-row>




    </div>
</template>

<script>
    export default {
        data () {
            return {
                count: 10,
                loading: false,
                doInfinite: true,
            }
        },
        computed: { // 将方法返回值作为 值
            noMore () {
                // return this.count >= 2000
                return this.count >= 30
            },
            disabled () {
                // console.log("inin")
                return this.loading || this.noMore
            }
        },
        methods: {
            load () {
                console.log("load");
                this.loading = true;
                setTimeout(() => {
                    // this.count += 2;
                    this.doGetPostList(1, 10);
                    this.loading = false
                }, 1000)
            },

            doGetPostList(index, pageSize){
                // 更新 url 拼接 排序方式、分页 参数
                let getPostListUrl = this.GLOBAL.serverBaseUrl + this.GLOBAL.postListByReply + "?sortType=" + "view";
                getPostListUrl += "&index=" + index + "&pageSize=" + pageSize;
                console.log("url:  " + getPostListUrl);
                this.$http.get(getPostListUrl).then(req =>{
                    if (req.data !== "") {
                        if (req.data.rs.result_code === 200) { /*查询成功   */
                            this.count += 2;
                            console.log("异步任务执行完");
                        } else {  /*查询失败*/
                            this.getPostsRs.success = false;
                            this.getPostsRs.msg = req.data.rs.msg;
                        }
                    } else {
                        this.getPostsRs.success = false;
                        this.getPostsRs.msg = '糟糕，服务器出事了。。';
                    }
                });
            }
        }
    }
</script>